<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>这里是作业2的页面</title>
		<style type="text/css">
			#div1{
				width:150px ;
				height: 150px;
				background-color: antiquewhite;
			}
			#div2{
				width: 200px;
				height: 200px;
				background-color: bisque;
			}
			#div3{
				width: 300px;
				height: 300px;
				background-color: #FFE4C4;
			}
		</style>
	</head>
	<body>
		<!-- 2.新制作一个页面，要求： -->
		       <!-- 2.1 至少包含以下元素：3个DIV,标题，5个P标签，图片，列表 --> 
			   <h1>标题一</h1>
			   <div id="div1">这是第一个DIV
			   </div>
			   <br>
			   <h1>标题二</h1>
			   <div id="div2" class="baseDIV">这是第二个
			   <li>列表一</li>
			   <li>列表二</li>
			   <li>列表三</li>
			   </div>
			   <br>
			   <h1>标题三</h1>
			   <div id="div3">这是第三个DIV
				   <img src="../img/u=1915816833,3554208343&fm=26&fmt=auto.webp" width="100px" height="100px">
				   <p>猪(标签一)</p>
				   <p>你的鼻子有两个孔(标签二)</p>
			       <p>感冒时的你(标签三)</p>
				   <p>总挂着鼻涕(标签四)</p>
				   <p>扭扭(标签五)</p>
			   </div>
		       <!-- 2.2 分别实现 id,类，标签三种方式查找以上元素 -->
			   <button type="button" onclick="getid();">id查找元素</button>
			   <button type="button" onclick="getclass();">class查找元素</button>
			   <button type="button" onclick="getbiaoqian();">标签查找元素</button>
	</body>
	<script type="text/javascript">
		function getid(){
			console.log(document.getElementById('div1'));
			console.log(document.getElementById('div2'));
			console.log(document.getElementById('div3'));
		}
			
		function getclass(){
			console.log(document.getElementsByClassName('baseDIV'));
		}
		
		function getbiaoqian(){
			console.log(document.getElementsByTagName('p'));
			console.log(document.getElementsByTagName('li'));
		}
	</script>
</html>
